<script setup>
import router from "@/router";
import { computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import sideBar from "@/components/SideBar.vue";

const salonMenu = {
  title: "创客空间",
  path: "/salon/forum",
  children: [
    {
      id: 1,
      title: "创意交流",
      path: "/idea",
      icon: "icon-f-idea",
    },
    {
      id: 2,
      title: "学生组队",
      path: "/team",
      icon: "icon-xuexiao_xuesheng",
    },
    {
      id: 3,
      title: "畅聊天地",
      path: "/chat",
      icon: "icon-liaotian1",
    },
  ],
};
const isCreatePage = computed(
  () => router.currentRoute.value.fullPath.split("/")[2] === "create"
);

const route = useRoute();
const isSalonForumPath = computed(() => route.path.startsWith("/salon/forum/"));

onMounted(() => {
  document.documentElement.scrollTop = 0;
});
</script>
<template>
  <div class="salon" :style="isCreatePage && { backgroundColor: '#f0f8ff' }">
    <div class="salon-body">
      <!--左侧导航栏-->
      <sideBar :menuData="salonMenu" v-if="isSalonForumPath"></sideBar>

      <!--右侧主体内容  三级路由出口-->
      <RouterView class="rightBox" />
    </div>
  </div>
</template>
<style scoped lang="less">
.salon {
  // padding: 30px 0;
  .salon-body {
    display: flex;
    // margin: 0 auto;
    box-sizing: border-box;
    gap: 60px;
    justify-content: center;
  }
}

.rightBox {
  // flex: auto;
  width: 1140px;
  padding: 30px 0px;
  margin: 0 auto;
}

.title {
  color: white;
  font-size: 24px;
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}

.LNrouterLink {
  text-decoration: none;
  color: black;
}
</style>